<script lang="ts" setup>
  import Popover from '@sscd/popover';
  import Steps from '@sscd/steps';
</script>

<template>
  <div class="demo">
    <div class="demo-title">自定义点状步骤条</div>
    <div class="demo-content">
      <Steps :current="1">
        <template #progressDot="{ index, status, prefixCls }">
          <Popover>
            <template #content>
              <span>step {{ index }} status: {{ status }}</span>
            </template>
            <span :class="`${prefixCls}-icon-dot`" />
          </Popover>
        </template>
        <Steps.Step title="Finished" description="You can hover on the dot." />
        <Steps.Step title="In Progress" description="You can hover on the dot." />
        <Steps.Step title="Waiting" description="You can hover on the dot." />
        <Steps.Step title="Waiting" description="You can hover on the dot." />
      </Steps>
    </div>
  </div>
</template>
